<template>
    <div>
        <div class="top">
            <div class="title">{{ title }}</div>
            <div class="change-tip" v-if="hasChecked">
                (标
                <span class="color-block"></span>
                色字段为正在变更中...)
            </div>
            <div class="float-right">
                <el-button type="primary" v-if="showBtn" @click="submit">
                    {{ $t('message.submit') }}
                </el-button>
            </div>
        </div>
        <hr />
        <div class="base-info">
            <div class="stu-picture photo" v-if="viewData.PHOTO_">
                <div>
                    <img :src="face" v-if="face" />
                    <div v-else>个人照片</div>
                </div>
                <div class="btn" v-if="isEditBaseInfo && viewData.PHOTO_.isEdit">
                    <span @click="showPhotoDialog">
                        <font class="is-require" v-if="viewData.PHOTO_.isRequire">*</font>
                        修改
                    </span>
                    <span>|</span>
                    <span @click="deletePhoto">删除</span>
                </div>
            </div>
            <div class="stu-picture certificate" v-if="viewData.CERTIFICATE_PHOTO_">
                <div>
                    <img :src="certificate" v-if="certificate" />
                    <div v-else>证书照片</div>
                </div>
                <div class="btn" v-if="isEditBaseInfo && viewData.CERTIFICATE_PHOTO_.isEdit">
                    <span @click="showCertificateDialog">
                        <font class="is-require" v-if="viewData.CERTIFICATE_PHOTO_.isRequire">
                            *
                        </font>
                        修改
                    </span>
                    <span>|</span>
                    <span @click="deleteCertificate">删除</span>
                </div>
            </div>
            <div class="simple-info" v-if="!isEditBaseInfo">
                <div>
                    <span
                        v-if="viewData.NAME_"
                        :class="viewData.NAME_.inReview ? 'field-checked cn-name' : 'cn-name'"
                    >
                        {{ viewData.NAME_.columnValue }}
                    </span>
                    <span
                        :class="
                            viewData.NAME_SPELLING_.inReview ? 'field-checked en-name' : 'en-name'
                        "
                        v-if="viewData.NAME_SPELLING_"
                    >
                        {{ viewData.NAME_SPELLING_.columnValue }}
                    </span>
                </div>
                <div class="split">
                    <span
                        v-if="viewData.STUDENT_ID_"
                        :class="viewData.STUDENT_ID_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.STUDENT_ID_.isRequire">*</font>
                        {{ viewData.STUDENT_ID_.nameZH }}：{{ viewData.STUDENT_ID_.columnValue }}
                    </span>
                    <span
                        v-if="viewData.SEX_"
                        :class="viewData.SEX_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.SEX_.isRequire">*</font>
                        {{ viewData.SEX_.nameZH }}：{{ getSex(viewData.SEX_.columnValue) }}
                    </span>
                    <span
                        v-if="viewData.BIRTHDAY_"
                        :class="viewData.BIRTHDAY_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.BIRTHDAY_.isRequire">*</font>
                        {{ viewData.BIRTHDAY_.nameZH }}：{{
                            getFormatDate(viewData.BIRTHDAY_.columnValue)
                        }}
                    </span>
                    <span
                        v-if="viewData.STATE_"
                        :class="viewData.STATE_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.STATE_.isRequire">*</font>
                        {{ viewData.STATE_.nameZH }}：{{
                            getTextByValue(viewData.STATE_.columnValue, options.G_GJQU)
                        }}
                    </span>
                </div>
                <div class="split">
                    <span
                        v-if="viewData.NATIVE_PLACE_"
                        :class="viewData.NATIVE_PLACE_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.NATIVE_PLACE_.isRequire">*</font>
                        {{ viewData.NATIVE_PLACE_.nameZH }}：{{
                            getCityName(viewData.NATIVE_PLACE_.columnValue)
                        }}
                    </span>
                    <span
                        v-if="viewData.NATION_"
                        :class="viewData.NATION_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.NATION_.isRequire">*</font>
                        {{ viewData.NATION_.nameZH }}：{{
                            getTextByValue(viewData.NATION_.columnValue, options.G_MZ)
                        }}
                    </span>
                </div>
                <div class="split">
                    <span
                        v-if="viewData.PHONE_NUMBER_"
                        :class="viewData.PHONE_NUMBER_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.PHONE_NUMBER_.isRequire">*</font>
                        {{ viewData.PHONE_NUMBER_.nameZH }}：{{
                            viewData.PHONE_NUMBER_.columnValue
                        }}
                    </span>
                    <span
                        v-if="viewData.EMAIL_"
                        :class="viewData.EMAIL_.inReview ? 'field-checked' : null"
                    >
                        <font class="is-require" v-if="viewData.EMAIL_.isRequire">*</font>
                        {{ viewData.EMAIL_.nameZH }}：{{ viewData.EMAIL_.columnValue }}
                    </span>
                </div>
            </div>
            <div class="float-right">
                <div style="height:32px">
                    <el-button v-if="showBtn && !isEditBaseInfo" @click="editBaseInfo">
                        字段修改
                    </el-button>
                </div>
            </div>
            <div v-if="isEditBaseInfo" style="width:750px;float:left">
                <el-form
                    label-position="right"
                    label-width="100px"
                    label-suffix=":"
                    :model="viewData"
                    ref="formBase"
                >
                    <el-row>
                        <el-col :span="12" v-if="viewData.STUDENT_ID_">
                            <el-form-item
                                prop="STUDENT_ID_.columnValue"
                                :rules="getAllRules(viewData.STUDENT_ID_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.STUDENT_ID_.inReview ? 'field-checked' : null"
                                >
                                    {{ $t('label.stuCode') }}：
                                </span>
                                <span v-if="!viewData.STUDENT_ID_.isEdit">
                                    {{ viewData.STUDENT_ID_.columnValue }}
                                </span>
                                <el-input
                                    v-else
                                    v-model="viewData.STUDENT_ID_.columnValue"
                                    :maxlength="viewData.STUDENT_ID_.length"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.NAME_">
                            <el-form-item
                                prop="NAME_.columnValue"
                                :rules="getAllRules(viewData.NAME_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.NAME_.inReview ? 'field-checked' : null"
                                >
                                    {{ $t('label.stuName') }}：
                                </span>
                                <span v-if="!viewData.NAME_.isEdit">
                                    {{ viewData.NAME_.columnValue }}
                                </span>
                                <el-input
                                    v-else
                                    v-model="viewData.NAME_.columnValue"
                                    :maxlength="viewData.NAME_.length"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.NAME_SPELLING_">
                            <el-form-item
                                prop="NAME_SPELLING_.columnValue"
                                :rules="getAllRules(viewData.NAME_SPELLING_)"
                            >
                                <span
                                    slot="label"
                                    :class="
                                        viewData.NAME_SPELLING_.inReview ? 'field-checked' : null
                                    "
                                >
                                    {{ viewData.NAME_SPELLING_.nameZH }}：
                                </span>
                                <span v-if="!viewData.NAME_SPELLING_.isEdit">
                                    {{ viewData.NAME_SPELLING_.columnValue }}
                                </span>
                                <el-input
                                    v-else
                                    v-model="viewData.NAME_SPELLING_.columnValue"
                                    :maxlength="viewData.NAME_SPELLING_.length"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.SEX_">
                            <el-form-item
                                prop="SEX_.columnValue"
                                :rules="getAllRules(viewData.SEX_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.SEX_.inReview ? 'field-checked' : null"
                                >
                                    {{ $t('label.sex') }}：
                                </span>
                                <span v-if="!viewData.SEX_.isEdit">
                                    {{ getSex(viewData.SEX_.columnValue) }}
                                </span>
                                <div
                                    v-if="viewData.SEX_.isEdit"
                                    :class="viewData.SEX_.columnValue == 1 ? 'sex-active' : 'sex'"
                                    @click="changeSex(1)"
                                >
                                    男
                                </div>
                                <div
                                    v-if="viewData.SEX_.isEdit"
                                    :class="viewData.SEX_.columnValue == 2 ? 'sex-active' : 'sex'"
                                    @click="changeSex(2)"
                                >
                                    女
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.BIRTHDAY_">
                            <el-form-item
                                prop="BIRTHDAY_.columnValue"
                                :rules="getAllRules(viewData.BIRTHDAY_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.BIRTHDAY_.inReview ? 'field-checked' : null"
                                >
                                    {{ viewData.BIRTHDAY_.nameZH }}：
                                </span>
                                <span v-if="!viewData.BIRTHDAY_.isEdit">
                                    {{ getFormatDate(viewData.BIRTHDAY_.columnValue) }}
                                </span>
                                <el-date-picker
                                    v-else
                                    v-model="viewData.BIRTHDAY_.columnValue"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    style="width:100%"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.STATE_">
                            <el-form-item
                                prop="STATE_.columnValue"
                                :rules="getAllRules(viewData.STATE_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.STATE_.inReview ? 'field-checked' : null"
                                >
                                    {{ viewData.STATE_.nameZH }}：
                                </span>
                                <span v-if="!viewData.STATE_.isEdit">
                                    {{
                                        getTextByValue(viewData.STATE_.columnValue, options.G_GJQU)
                                    }}
                                </span>
                                <pager-select
                                    v-else
                                    :data="options.G_GJQU"
                                    v-model="viewData.STATE_.columnValue"
                                ></pager-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.NATIVE_PLACE_">
                            <el-form-item
                                prop="NATIVE_PLACE_.columnValue"
                                :rules="getAllRules(viewData.NATIVE_PLACE_)"
                            >
                                <span
                                    slot="label"
                                    :class="
                                        viewData.NATIVE_PLACE_.inReview ? 'field-checked' : null
                                    "
                                >
                                    {{ viewData.NATIVE_PLACE_.nameZH }}：
                                </span>
                                <span v-if="!viewData.NATIVE_PLACE_.isEdit">
                                    {{ getCityName(viewData.NATIVE_PLACE_.columnValue) }}
                                </span>
                                <select-tree
                                    v-else
                                    :data="citys"
                                    v-model="viewData.NATIVE_PLACE_.columnValue"
                                ></select-tree>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.NATION_">
                            <el-form-item
                                prop="NATION_.columnValue"
                                :rules="getAllRules(viewData.NATION_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.NATION_.inReview ? 'field-checked' : null"
                                >
                                    {{ viewData.NATION_.nameZH }}：
                                </span>
                                <span v-if="!viewData.NATION_.isEdit">
                                    {{ getTextByValue(viewData.NATION_.columnValue, options.G_MZ) }}
                                </span>
                                <el-select
                                    v-else
                                    style="width:100%"
                                    v-model="viewData.NATION_.columnValue"
                                    :filterable="viewData.NATION_.isSearch"
                                >
                                    <el-option
                                        v-for="item in options.G_MZ"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.PHONE_NUMBER_">
                            <el-form-item
                                prop="PHONE_NUMBER_.columnValue"
                                :rules="getAllRules(viewData.PHONE_NUMBER_)"
                            >
                                <span
                                    slot="label"
                                    :class="
                                        viewData.PHONE_NUMBER_.inReview ? 'field-checked' : null
                                    "
                                >
                                    {{ viewData.PHONE_NUMBER_.nameZH }}：
                                </span>
                                <span v-if="!viewData.PHONE_NUMBER_.isEdit">
                                    {{ viewData.PHONE_NUMBER_.columnValue }}
                                </span>
                                <el-input
                                    v-else
                                    v-model="viewData.PHONE_NUMBER_.columnValue"
                                    :maxlength="viewData.PHONE_NUMBER_.length"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="viewData.EMAIL_">
                            <el-form-item
                                prop="EMAIL_.columnValue"
                                :rules="getAllRules(viewData.EMAIL_)"
                            >
                                <span
                                    slot="label"
                                    :class="viewData.EMAIL_.inReview ? 'field-checked' : null"
                                >
                                    {{ viewData.EMAIL_.nameZH }}：
                                </span>
                                <span v-if="!viewData.EMAIL_.isEdit">
                                    {{ viewData.EMAIL_.columnValue }}
                                </span>
                                <el-input
                                    v-else
                                    v-model="viewData.EMAIL_.columnValue"
                                    :maxlength="viewData.EMAIL_.length"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div style="clear:both"></div>
        <div style="margin-top:20px;text-align:right">
            <div v-if="isEditBaseInfo">
                <el-button @click="cancelBaseEdit">{{ $t('message.cancel') }}</el-button>
                <el-button @click="saveBaseInfo" type="primary">
                    {{ $t('message.confirm') }}
                </el-button>
            </div>
        </div>
        <div class="info-zone">
            <div class="edit-icon">
                <i
                    class="el-icon-edit-outline"
                    v-if="showBtn && !isEditOther"
                    @click="editZone1"
                ></i>
            </div>
            <el-form
                label-position="right"
                label-width="130px"
                label-suffix=":"
                :model="viewData"
                ref="formOther"
            >
                <el-row>
                    <dynamic-column
                        v-if="finished"
                        :view-data="viewData"
                        :attrs="otherAttr"
                        :options="options"
                        :edit="isEditOther"
                        :citys="citys"
                    />
                </el-row>
            </el-form>
            <div class="float-right" v-if="isEditOther">
                <el-button @click="cancelZone1">{{ $t('message.cancel') }}</el-button>
                <el-button @click="saveZone1" type="primary">{{ $t('message.confirm') }}</el-button>
            </div>
        </div>
        <div class="personal-family-title">个人联系信息及家庭信息</div>
        <div class="info-zone">
            <div class="edit-icon">
                <i
                    class="el-icon-edit-outline"
                    @click="editZone2"
                    v-if="showBtn && !isEditPerson"
                ></i>
            </div>
            <el-form
                label-position="right"
                label-width="120px"
                label-suffix=":"
                :model="viewData"
                ref="formPerson"
            >
                <el-row>
                    <dynamic-column
                        v-if="finished"
                        :view-data="viewData"
                        :attrs="personContactAttr"
                        :options="options"
                        :edit="isEditPerson"
                        :citys="citys"
                    />
                </el-row>
            </el-form>
            <div class="float-right" v-if="isEditPerson">
                <el-button @click="cancelZone2">{{ $t('message.cancel') }}</el-button>
                <el-button @click="saveZone2" type="primary">{{ $t('message.confirm') }}</el-button>
            </div>
        </div>
        <div class="info-zone">
            <div class="edit-icon">
                <i
                    class="el-icon-edit-outline"
                    @click="editZone3"
                    v-if="showBtn && !isEditFamily"
                ></i>
            </div>
            <el-form
                label-position="right"
                label-width="190px"
                label-suffix=":"
                :model="viewData"
                ref="formStuFamily"
            >
                <el-row>
                    <dynamic-column
                        v-if="finished"
                        :view-data="viewData"
                        :attrs="familyAttr"
                        :options="options"
                        :edit="isEditFamily"
                        :citys="citys"
                    />
                </el-row>
            </el-form>
            <div class="float-right" v-if="isEditFamily">
                <el-button @click="cancelZone3">{{ $t('message.cancel') }}</el-button>
                <el-button @click="saveZone3" type="primary">{{ $t('message.confirm') }}</el-button>
            </div>
        </div>
        <difference-dialog
            ref="diffDialog"
            :post-data="postData.stuDetailInfoList"
            :raw-data="rawCopyData"
            :options="options"
            :checked="checked"
            @save-diff="saveCheck"
            @update="saveSuccessed"
            :citys="citys"
        ></difference-dialog>
        <pic-upload-dialog
            title="照片上传"
            ref="photoUpload"
            v-if="viewData.PHOTO_ && viewData.PHOTO_.isEdit"
            @success="savePhoto"
        />
        <pic-upload-dialog
            title="证书照片上传"
            ref="certificateUpload"
            v-if="viewData.CERTIFICATE_PHOTO_ && viewData.CERTIFICATE_PHOTO_.isEdit"
            @success="saveCertificate"
        />
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import {
    getStudentDetail,
    stuDetailSubmit,
    getStuInfoByParam,
    getStationInfoList
} from 'common/src/api/studentinfo'
import { getImageData } from 'common/src/api/teacherinfo'
import differenceDialog from './differenceDialog'
import picUploadDialog from './picUploadDialog'
import dynamicColumn from './dynamicColumn'
import { submitField, getRules, getCitys, getCityNameByValue } from './businessMethods'
import moment from 'moment'
export default {
    name: 'baseInfo',
    props: ['uid', 'tableName', 'title', 'showBtn', 'statusInfo'],
    components: {
        differenceDialog,
        picUploadDialog,
        dynamicColumn
    },
    data() {
        return {
            face: null,
            certificate: null,
            isEditBaseInfo: false,
            isEditOther: false,
            isEditPerson: false,
            isEditFamily: false,
            data: null, //接口返回的原始学生数据
            rawCopyData: null, //原生的数据拷贝
            viewData: {},
            citys: [],
            checked: false, //是否存在审核
            finished: false,
            postData: {
                studentId: 0,
                stuDetailInfoList: []
            }, //存在审核字段时，先保存需要提交的数据
            options: {},
            baseAttr: [
                'STUDENT_ID_',
                'NAME_',
                'NAME_SPELLING_',
                'SEX_',
                'PHOTO_',
                'CERTIFICATE_PHOTO_',
                'BIRTHDAY_',
                'STATE_',
                'NATIVE_PLACE_',
                'NATION_',
                'PHONE_NUMBER_',
                'EMAIL_'
            ],
            otherAttr: [
                'USED_NAME_',
                'RELIGION_',
                'POLITICAL_STATUS_',
                'JOIN_LEAGUE_TIME_',
                'JOIN_PARTY_TIME_',
                'CHINA_SON_',
                'BRITHPLACE_',
                'STUDENT_SOURCE_',
                'MARITAL_STATUS',
                'HEALTH_STATUS_',
                'BANK_ACCOUNT_',
                'BACK_',
                'STATION_START',
                'STATION_TERMINI_',
                'DEPARTMENT_PARTY_',
                'HEIGHT_',
                'WEIGHT_',
                'MEDICAL_HISTORY_',
                'SPECIALITY_',
                'BLOOD_GROUP_',
                'IS_ONE_CHILD_',
                'ACTIVE_ARMY_',
                'HOUSEHOLD_REGISTER_',
                'REGISTERED_ADDRESS_',
                'REGISTERED_POSTAL_CODE_',
                'REMARK_'
            ],
            personContactAttr: [
                'DORMITORY_TELEPHONE_',
                'WORK_UNIT_',
                'QQ',
                'WECHAT_',
                'CONTART_NUMBER_',
                'UNIT_ADDRESS_',
                'UNIT_POSTCODE_',
                'HOMEPAGE_',
                'MAILING_ADDRESS_',
                'POSTAL_CODE_'
            ],
            familyAttr: [
                'FAMILY_CONTACT1_',
                'FAMILY_TELEPHONE_',
                'FAMILY_POSTCODE_',
                'FAMILY_ADDRESS_',
                'FATHER_GUARDIAN_NAME_',
                'FATHER_ID_TYPE_',
                'FATHER_ID_CODE_',
                'MOTHER_GUARDIAN_NAME_',
                'MOTHER_ID_TYPE_',
                'MOTHER_ID_CODE_',

                'ANNUAL_INCOME_',
                'MAJOR_INCOME_SOURCE_'
            ],
            baseColumns: [], //编辑前保存上一次数据列，取消时还原数据
            otherColumns: [], //编辑前保存上一次数据列，取消时还原数据
            personColumns: [], //编辑前保存上一次数据列，取消时还原数据
            familyColumns: [], //编辑前保存上一次数据列，取消时还原数据
            searchColumns: ['STATE_', 'NATIVE_PLACE_', 'NATION_'],
            allDay: '1', //全日制编码
            hasChecked: false //是否有审核字段
        }
    },
    mounted() {
        this.getStuDetail()
    },
    methods: {
        getStuDetail() {
            new Promise((resolve, reject) => {
                getStudentDetail({
                    studentId: this.uid,
                    fieldClasses: this.tableName
                }).then(res => {
                    if (res.code == 200) {
                        this.data = res.data
                        this.initData()
                        this.getDic()
                        resolve()
                    } else {
                        reject()
                    }
                })
            }).then(() => {
                //getStuInfoByParam(this.uid, "student_status_information_t");
            })
        },
        //动态获取字典信息
        getDic() {
            let selectValues = []
            for (let col in this.viewData) {
                if (
                    this.viewData[col].type == 'select' &&
                    this.viewData[col].value &&
                    !selectValues.includes(this.viewData[col].value)
                ) {
                    selectValues.push(this.viewData[col].value)
                }
            }
            //筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: selectValues
            }
            let _that = this
            queryDic(data).then(res => {
                if (res.code == 200 && res.data) {
                    let keyword = '其他'
                    for (const key in res.data) {
                        let items = []
                        let obj = res.data[key]
                        for (const objKey in obj) {
                            items.push({
                                value: objKey,
                                label: obj[objKey]
                            })
                        }
                        items = _.sortBy(items, ['value'])
                        items = items
                            .filter(o => o.label.indexOf(keyword) == -1)
                            .concat(items.filter(o => o.label.indexOf(keyword) != -1))
                        this.$set(this.options, key, items)
                    }
                    this.citys = getCitys(this.options)
                    this.getStation()
                }
            })
        },
        initData() {
            if (this.data) {
                let viewData = {}
                let setObjValue = keys => {
                    keys.forEach(key => {
                        this.data.forEach(row => {
                            let col = row.stuAttriInfos.find(c => c.column == key)
                            if (col) {
                                viewData[key] = col
                                this.handleColumn(viewData[key])
                                if (col.inReview) {
                                    this.hasChecked = true
                                }
                            }
                        })
                    })
                }
                //注：正常情况下，两张表不存在相同字段,如果存在，显示可能不正常
                setObjValue(this.baseAttr)
                setObjValue(this.otherAttr)
                setObjValue(this.personContactAttr)
                setObjValue(this.familyAttr)
                //更新视图数据
                this.viewData = viewData
                this.rawCopyData = _.cloneDeep(this.data)
                this.loadImage()
                this.loadCertificate()
                this.finished = true
            }
        },
        handleColumn(column) {
            if (column.type === 'select' && column.column === 'HEALTH_STATUS_') {
                column.columnValue = column.columnValue ? column.columnValue.split(',') : []
                column.isMulti = true
            }
            if (column.type === 'select' && this.searchColumns.includes(column.column)) {
                column.isSearch = true
            }
        },
        loadImage() {
            if (this.viewData.hasOwnProperty('PHOTO_') && this.viewData.PHOTO_.columnValue) {
                getImageData(this.viewData.PHOTO_.columnValue).then(response => {
                    if (response.code == 200 && response.data) {
                        this.face = response.data.base
                    }
                })
            }
        },
        loadCertificate() {
            if (
                this.viewData.hasOwnProperty('CERTIFICATE_PHOTO_') &&
                this.viewData.CERTIFICATE_PHOTO_.columnValue
            ) {
                getImageData(this.viewData.CERTIFICATE_PHOTO_.columnValue).then(response => {
                    if (response.code == 200 && response.data) {
                        this.certificate = response.data.base
                    }
                })
            }
        },
        editBaseInfo() {
            this.isEditBaseInfo = true
            let c = []
            let columns = this.baseAttr.forEach(col => {
                if (this.viewData.hasOwnProperty(col) && this.viewData[col].isEdit) {
                    c.push(this.viewData[col])
                }
            })
            this.baseColumns = _.cloneDeep(c)
        },
        cancelBaseEdit() {
            let changed = false
            this.baseColumns.forEach(oldColumn => {
                let newColumn = this.viewData[oldColumn.column]
                if (newColumn.columnValue != oldColumn.columnValue) {
                    changed = true
                }
            })
            if (changed) {
                this.prompt(() => {
                    this.isEditBaseInfo = false
                    let checkModifyFn = (columns, columnName) => {
                        let obj1 = columns.find(c => c.column == columnName)
                        let obj2 = this.viewData[columnName]
                        return obj1 && obj2 && obj1.columnValue != obj2.columnValue
                    }
                    let photoChanged = checkModifyFn(this.baseColumns, 'PHOTO_')
                    let certificateChanged = checkModifyFn(this.baseColumns, 'CERTIFICATE_PHOTO_')
                    this.baseColumns.forEach(oldColumn => {
                        let newColumn = this.viewData[oldColumn.column]
                        if (newColumn.columnValue != oldColumn.columnValue) {
                            newColumn.columnValue = oldColumn.columnValue
                        }
                    })
                    if (photoChanged) {
                        this.loadImage()
                    }
                    if (certificateChanged) {
                        this.loadCertificate()
                    }
                    this.baseColumns = []
                })
            } else {
                this.isEditBaseInfo = false
                this.baseColumns = []
            }
        },
        saveBaseInfo() {
            let _this = this
            this.$refs.formBase.validate(valid => {
                if (valid) {
                    if (_this.viewData.PHOTO_.isRequire && _this.face === null) {
                        this.$message.error('必须上传个人照片')
                        return false
                    } else if (_this.viewData.CERTIFICATE_PHOTO_.isRequire && _this.certificate === null) {
                        this.$message.error('必须上传证书照片')
                        return false
                    }
                    this.isEditBaseInfo = false
                    this.baseColumns = []
                }
            })
        },
        changeSex(val) {
            this.viewData.SEX_.columnValue = val
        },
        editZone1() {
            this.isEditOther = true
            let c = []
            let columns = this.otherAttr.forEach(col => {
                if (this.viewData.hasOwnProperty(col) && this.viewData[col].isEdit) {
                    c.push(this.viewData[col])
                }
            })
            this.otherColumns = _.cloneDeep(c)
        },
        cancelZone1() {
            let changed = false
            this.otherColumns.forEach(oldColumn => {
                let newColumn = this.viewData[oldColumn.column]
                if (newColumn.columnValue != oldColumn.columnValue) {
                    changed = true
                }
            })
            if (changed) {
                this.prompt(() => {
                    this.isEditOther = false
                    this.otherColumns.forEach(oldColumn => {
                        let newColumn = this.viewData[oldColumn.column]
                        if (newColumn.columnValue != oldColumn.columnValue) {
                            newColumn.columnValue = oldColumn.columnValue
                        }
                    })
                    this.otherColumns = []
                    this.$refs.formOther.clearValidate()
                })
            } else {
                this.isEditOther = false
                this.otherColumns = []
                this.$refs.formOther.clearValidate()
            }
        },
        saveZone1() {
            this.$refs.formOther.validate(valid => {
                if (valid) {
                    this.isEditOther = false
                    this.otherColumns = []
                }
            })
        },
        editZone2() {
            this.isEditPerson = true
            let c = []
            let columns = this.personContactAttr.forEach(col => {
                if (this.viewData.hasOwnProperty(col) && this.viewData[col].isEdit) {
                    c.push(this.viewData[col])
                }
            })
            this.personColumns = _.cloneDeep(c)
        },
        cancelZone2() {
            let changed = false
            this.personColumns.forEach(oldColumn => {
                let newColumn = this.viewData[oldColumn.column]
                if (newColumn.columnValue != oldColumn.columnValue) {
                    changed = true
                }
            })
            if (changed) {
                this.prompt(() => {
                    this.isEditPerson = false
                    this.personColumns.forEach(oldColumn => {
                        let newColumn = this.viewData[oldColumn.column]
                        if (newColumn.columnValue != oldColumn.columnValue) {
                            newColumn.columnValue = oldColumn.columnValue
                        }
                    })
                    this.personColumns = []
                    this.$refs.formPerson.clearValidate()
                })
            } else {
                this.isEditPerson = false
                this.personColumns = []
                this.$refs.formPerson.clearValidate()
            }
        },
        saveZone2() {
            this.$refs.formPerson.validate(valid => {
                if (valid) {
                    this.isEditPerson = false
                    this.personColumns = []
                }
            })
        },
        editZone3() {
            this.isEditFamily = true
            let c = []
            let columns = this.familyAttr.forEach(col => {
                if (this.viewData.hasOwnProperty(col) && this.viewData[col].isEdit) {
                    c.push(this.viewData[col])
                }
            })
            this.familyColumns = _.cloneDeep(c)
        },
        cancelZone3() {
            let changed = false
            this.familyColumns.forEach(oldColumn => {
                let newColumn = this.viewData[oldColumn.column]
                if (newColumn.columnValue != oldColumn.columnValue) {
                    changed = true
                }
            })
            if (changed) {
                this.prompt(() => {
                    this.isEditFamily = false
                    this.familyColumns.forEach(oldColumn => {
                        let newColumn = this.viewData[oldColumn.column]
                        if (newColumn.columnValue != oldColumn.columnValue) {
                            newColumn.columnValue = oldColumn.columnValue
                        }
                    })
                    this.familyColumns = []
                    this.$refs.formStuFamily.clearValidate()
                })
            } else {
                this.isEditFamily = false
                this.familyColumns = []
                this.$refs.formStuFamily.clearValidate()
            }
        },
        saveZone3() {
            this.$refs.formStuFamily.validate(valid => {
                if (valid) {
                    if (
                        this.statusInfo &&
                        this.statusInfo.formLearning &&
                        this.statusInfo.formLearning === this.allDay
                    ) {
                        let result = this.checkAllDayParentInfo()
                        if (!result) return
                    }
                    this.isEditFamily = false
                    this.familyColumns = []
                }
            })
        },
        //检查全日制父母信息
        checkAllDayParentInfo() {
            let fatherInfoCheck = false //是否开启父亲信息验证
            let motherInfoCheck = false
            let fatherCheckStatus = false //父亲信息验证状态
            let motherCheckStatus = false
            if (
                this.viewData.FATHER_GUARDIAN_NAME_ &&
                this.viewData.FATHER_ID_CODE_ &&
                this.viewData.FATHER_ID_TYPE_
            ) {
                fatherInfoCheck = true
            }
            if (
                this.viewData.MOTHER_GUARDIAN_NAME_ &&
                this.viewData.MOTHER_ID_CODE_ &&
                this.viewData.MOTHER_ID_TYPE_
            ) {
                motherInfoCheck = true
            }
            //未开启验证，直接返回true
            if (!fatherInfoCheck && !motherInfoCheck) {
                return true
            }
            //开始验证
            let notEmpty = column => {
                return column.columnValue != null && column.columnValue != ''
            }
            if (
                fatherInfoCheck &&
                notEmpty(this.viewData.FATHER_GUARDIAN_NAME_) &&
                notEmpty(this.viewData.FATHER_ID_CODE_) &&
                notEmpty(this.viewData.FATHER_ID_TYPE_)
            ) {
                fatherCheckStatus = true
            }
            if (
                motherInfoCheck &&
                notEmpty(this.viewData.MOTHER_GUARDIAN_NAME_) &&
                notEmpty(this.viewData.MOTHER_ID_CODE_) &&
                notEmpty(this.viewData.MOTHER_ID_TYPE_)
            ) {
                motherCheckStatus = true
            }
            if (!fatherCheckStatus && !motherCheckStatus) {
                this.$message({
                    type: 'warning',
                    message: '父亲或母亲，至少填写一方的姓名、证件类型、证件号码'
                })
                return false
            }
            return true
        },
        submit() {
            let diff = this.getDiffColumns()
            if (!diff) {
                return
            }
            if (diff.length == 0) {
                this.$message('内容未修改，无需提交')
                return
            }
            this.$confirm('您确定要提交吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    //构建提交数据结构
                    let _data = {
                        studentId: this.uid,
                        stuDetailInfoList: []
                    }
                    this.data.forEach(row => {
                        let obj = {
                            id: row.id,
                            operType: row.id ? '2' : '1', //基础信息，只有两种操作类型：新增、更新
                            stuAttriInfos: null
                        }
                        obj.stuAttriInfos = diff.filter(newColumn => {
                            let col = row.stuAttriInfos.find(
                                oldColumn =>
                                    oldColumn.column == newColumn.column &&
                                    oldColumn.from == newColumn.from
                            )
                            if (col && col.isMulti) {
                                col.columnValue = col.columnValue.join(',')
                            }
                            return col
                        })
                        if (obj.stuAttriInfos.length > 0) {
                            obj.stuAttriInfos.forEach(col => {
                                if (col.isEdit && col.type == 'select' && col.value) {
                                    let newOpt = this.options[col.value].find(
                                        option => option.value == col.columnValue
                                    )
                                    let oldOpt = this.options[col.value].find(
                                        option => option.value == col.oldColumnValue
                                    )
                                    if (newOpt) {
                                        col.newRealValue = newOpt.label
                                    }
                                    if (oldOpt) {
                                        col.oldRealValue = oldOpt.label
                                    }
                                }
                            })
                            _data.stuDetailInfoList.push(obj)
                        }
                    })
                    let hasCheckField = diff.some(
                        field => field.isSchoolCheck || field.isCollegeCheck
                    )
                    this.postData = _data
                    if (hasCheckField) {
                        setTimeout(() => {
                            this.checked = true
                            this.$refs.diffDialog.open()
                        }, 300)
                    } else {
                        stuDetailSubmit(_data).then(res => {
                            if (res.code == 200) {
                                this.checked = false
                                this.$refs.diffDialog.open()
                            }
                        })
                    }
                })
                .catch(() => {})
        },
        //保存审核字段
        saveCheck(fileList, modifyDesc) {
            submitField(
                this.uid,
                fileList,
                modifyDesc,
                _.cloneDeep(this.postData),
                this.rawCopyData,
                this.saveAfter
            )
        },
        saveAfter() {
            this.$refs.diffDialog.close()
            this.$message({
                type: 'success',
                message: this.$t('message.saveSuccess')
            })
            setTimeout(() => {
                this.getStuDetail()
            }, 500)
        },
        getSex(val) {
            if (val == 1) {
                return '男'
            } else if (val == 2) {
                return '女'
            } else {
                return null
            }
        },
        getFormatDate(val) {
            return val ? moment(val).format('YYYY-MM-DD') : null
        },
        getTextByValue(val, array) {
            if (val == null) {
                return null
            }
            if (!array) {
                return null
            }
            let option = array.find(_ => _.value == val)
            return option ? option.label : null
        },
        //根据column字段获取表单规则
        getAllRules(column) {
            return getRules(column)
        },
        //保存个人照片
        savePhoto(url) {
            this.viewData.PHOTO_.columnValue = url
            this.loadImage()
        },
        //保存证书照片
        saveCertificate(url) {
            this.viewData.CERTIFICATE_PHOTO_.columnValue = url
            this.loadCertificate()
        },
        //显示照片对话框
        showPhotoDialog() {
            this.$refs.photoUpload.open()
        },
        //删除个人头像
        deletePhoto() {
            this.face = null
            this.viewData.PHOTO_.columnValue = null
        },
        //显示证书对话框
        showCertificateDialog() {
            this.$refs.certificateUpload.open()
        },
        //删除证书照片
        deleteCertificate() {
            this.certificate = null
            this.viewData.CERTIFICATE_PHOTO_.columnValue = null
        },
        //提示
        prompt(fn) {
            this.$confirm('返回后您的当前操作将不会保存，请确定操作', this.$t('message.prompt'), {
                confirmButtonText: this.$t('message.confirm'),
                cancelButtonText: this.$t('message.cancel'),
                type: 'warning'
            })
                .then(() => {
                    fn()
                })
                .catch(() => {})
        },
        //检查是否存在改变
        checkModify() {
            let diff = this.getDiffColumns()
            if (!diff) {
                return null
            }
            return diff.length > 0
        },
        //获取差异列
        getDiffColumns() {
            if (this.isEditBaseInfo || this.isEditOther || this.isEditPerson || this.isEditFamily) {
                this.$message('请先确定或取消编辑')
                return null
            }
            let diff = [] //差异列集合
            let containFields = []
            this.rawCopyData.forEach(row => {
                row.stuAttriInfos.forEach(oldColumn => {
                    let newColumn = this.viewData[oldColumn.column]
                    if (newColumn && !containFields.includes(newColumn.fieldId)) {
                        let add = false
                        if (
                            newColumn.isMulti &&
                            newColumn.columnValue.join(',') != oldColumn.columnValue.join(',')
                        ) {
                            add = true
                            newColumn.oldColumnValue = oldColumn.columnValue.join(',')
                        } else if (
                            !newColumn.isMulti &&
                            newColumn.columnValue != oldColumn.columnValue
                        ) {
                            add = true
                            newColumn.oldColumnValue = oldColumn.columnValue
                        }
                        if (add) {
                            containFields.push(newColumn.fieldId)
                            diff.push(newColumn)
                        }
                    }
                })
            })
            return diff
        },
        saveSuccessed() {
            this.getStuDetail()
        },
        getCityName(val) {
            return getCityNameByValue(val, this.citys)
        },
        getStation() {
            //终点站火车
            getStationInfoList({}).then(res => {
                if (res.code == 200) {
                    this.$set(
                        this.options,
                        'end_station',
                        res.data.map(station => {
                            return {
                                label: station.provice + '-' + station.station,
                                value: station.id
                            }
                        })
                    )
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.top {
    height: 32px;
    .title {
        float: left;
        line-height: 32px;
        font-size: 16px;
    }
    .change-tip {
        line-height: 32px;
        font-size: 16px;
        float: left;
        margin-left: 15px;
        .color-block {
            background: #ff7800;
            display: inline-block;
            width: 25px;
            height: 12px;
            margin: 0 5px 0 0;
        }
    }
}
.base-info {
    color: #4c5c70;
    .photo {
        float: left;
        margin-top: 10px;
        margin-right: 10px;
    }
    .stu-picture > div:first-child {
        border: 1px solid #d2d4d6;
        width: 102px;
        height: 132px;
        & img {
            width: 90px;
            height: 120px;
            display: block;
            margin: 5px;
        }
        & > div {
            width: 90px;
            height: 120px;
            margin: 5px;
            background: #e4e4e4;
            color: #6c7685;
            line-height: 120px;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
        }
    }
    .stu-picture > div.btn {
        text-align: center;
        margin-top: 10px;
        span {
            cursor: pointer;
        }
    }
    .simple-info {
        float: left;
        .split > span {
            margin-right: 20px;
        }
        & > div {
            margin: 12px 0 0 20px;
            font-size: 16px;
        }
        .cn-name {
            font-size: 20px;
            font-weight: bold;
        }
        .en-name {
            font-size: 16px;
            font-weight: bold;
        }
    }
    .sex {
        float: left;
        width: 50%;
        text-align: center;
        border: 1px solid #c0c4cc;
        cursor: pointer;
        height: 33px;
    }
    .sex-active {
        float: left;
        width: 50%;
        text-align: center;
        border: 1px solid #3a7fe8;
        background: #3a7fe8;
        color: #fff;
        cursor: pointer;
        height: 33px;
    }
}
.info-zone {
    overflow: auto;
    margin-top: 24px;
    border: 1px solid #ced6df;
    background: #f3f6f8;
    padding: 24px;
    padding-top: 0;
    font-size: 14px;
    .edit-icon {
        margin-top: 15px;
        font-size: 20px;
        text-align: right;
        i {
            cursor: pointer;
        }
    }
    span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}
.personal-family-title {
    font-size: 16px;
    margin-top: 24px;
}
.certificate {
    margin-top: 10px;
    float: left;
}
.is-require {
    color: #f56c6c;
}
.info-zone .el-form .el-col-8 {
    height: 51px !important;
}
.field-checked {
    color: #ff7800;
}
</style>
